<!--
 * @Author: 黑白灰01 3193273703@qq.com
 * @Date: 2025-01-29 18:14:29
 * @LastEditors: 黑白灰01 3193273703@qq.com
 * @LastEditTime: 2025-02-04 20:32:23
 * @FilePath: /hei_picture_web/src/page/home/modal/PictureList.vue
 * @Description: 图片列表
-->
<template>
  <a-list
    :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }"
    :data-source="props.dataList"
    :loading="props.loading"
  >
    <template #renderItem="{ item: picture }">
      <a-list-item style="padding: 0">
        <!-- 单张图片 -->
        <a-card hoverable @click="handlePictureClick(picture)">
          <template #cover>
            <img
              :alt="picture.name"
              :src="picture.thumbnailUrl ?? picture.url"
              style="height: 256px; object-fit: cover"
            />
          </template>
          <a-card-meta :title="picture.name">
            <template #description>
              <a-flex>
                <a-tag color="purple">
                  {{ picture.category ?? '默认' }}
                </a-tag>
                <a-tag color="purple" v-for="tag in picture.tags" :key="tag">
                  {{ tag }}
                </a-tag>
              </a-flex>
            </template>
          </a-card-meta>
        </a-card>
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

interface Props {
  dataList?: API.PictureVO[]
  loading?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  loading: false,
})
const router = useRouter()
const handlePictureClick = (picture: API.PictureVO) => {
  router.push(`/picture_info/${picture.id}`)
}
</script>
<style scoped></style>
